<template>
  <div class="equipment-main">
    <div class="left-container">
      <div @click="handleMenu">
        <template v-for="(v,k) in menuMap">
          <div
            v-if="k==='platformInfo'||
              k==='wechatOfficialAccount'&&$isAuthBtn(['SP_TAB_MP'])||
              k==='wechatMiniProgram'&&$isAuthBtn(['SP_TAB_MA'])||
              k==='oemSetting'&&$isAuthBtn(['SP_TAB_OEM'])
            "
            :key="k"
            class="menu-item pointer"
            :data-menu="k"
            :class="{'is-active':activeMenu===k}"
          >{{ v }}
          </div>
        </template>
      </div>
    </div>
    <div class="right-container">
      <PlatformInfo v-if="activeMenu==='platformInfo'" />
      <WechatOfficialAccount v-if="activeMenu==='wechatOfficialAccount'" />
      <WechatMiniProgram v-if="activeMenu==='wechatMiniProgram'" />
      <OemSetting v-if="activeMenu==='oemSetting'" />
    </div>
  </div>
</template>

<script>
import PlatformInfo from './components/PlatformInfo'
import WechatOfficialAccount from './components/WechatOfficialAccount'
import WechatMiniProgram from './components/WechatMiniProgram'
import OemSetting from './components/OemSetting'

export default {
  components: {
    PlatformInfo,
    WechatOfficialAccount,
    WechatMiniProgram,
	OemSetting
  },
  data() {
    return {
      // 配置
      menuMap: {
        platformInfo: '平台信息',
        wechatOfficialAccount: '公众号',
        wechatMiniProgram: '小程序',
        oemSetting: 'OEM设置'
      },
      // 状态
      // 数据
      activeMenu: 'platformInfo'
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    /**
     * 按钮组
     */
    // 选择菜单
    handleMenu(e) {
      this.activeMenu = e.target.dataset.menu || this.activeMenu
	  console.log('this.activeMenu----',this.activeMenu)
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.equipment-main {
  height: 100%;
}

/*菜单容器*/
.left-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  padding-right: 20px;
  border-right: 2px solid #f5f5f5;

  .menu-item {
    height: 36px;
    margin-bottom: 10px;
    padding: 0 20px;
    line-height: 36px;
    font-size: 14px;
    color: #303133;
    border-radius: 10px;
	

    &:not(.is-active) {
      &:hover {
        color: #303133;
        background-color: $overBg;
      }
    }
  }

  .is-active {
    color: #fff;
    background-color: $primary;
  }
}

/*右边容器*/
.right-container {
  padding-left: 170px;
}

</style>
